<template>
	<view>
		<view>
			<u-notice-bar :text="text1"></u-notice-bar>
		</view>
		<view>
			<u-popup :show="showScore" mode="bottom" @close="close" @open="open" closeable="true" round="8">
				<view style="padding: 50rpx; padding-left: 250rpx; padding-top: 50rpx; padding-bottom: 250rpx;">
					<u-rate :count="countScore" v-model="value" allowHalf="true" size="25"></u-rate>
					<view style="position: absolute; padding-top: 88rpx; padding-left: 88rpx;">
						<u-button type="success" text="确定" @click="scoreAdd"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<view class="title">{{ title }}</view>
			<view style="position: absolute; margin-top: 30rpx; margin-left: 20rpx;">
				<u-rate allowHalf="true" readonly="true" :count="count" v-model="score"></u-rate>
			</view>
			<view class="score">评分：{{ score }}</view>
			<view class="description">店铺描述：{{ description }}</view>
			<view>
				<scroll-view class="scrollContainer" scroll-x>
					<view class="scrollitem" v-for="(item, index) in dishsArr" :key="index" @click="gotoDish(item)">
						<image class="scrollimage" :src="item.picture"></image>
						<view class="recommandItemText">{{ item.actClassName }}</view>
					</view>
					<view class="EmptyData" v-if="dishsArr.length == 0">暂无数据</view>
				</scroll-view>
			</view>
			<view class="divider"></view>
			<image src="../../static/shijian.png" class="shijian"></image>
			<view class="workTime">营业时间：{{ workTime }}</view>
			<u-divider>大漠孤烟直</u-divider>
			<image src="../../static/dizhi.png" class="dizhi"></image>
			<view class="address">{{ address }}</view>
			<view style="padding-left: 580rpx;font-size: 24rpx;color: seagreen;" @click="complaint">投诉该店铺？</view>
		</view>
		<view class="divider"></view>
		<view class="comment">
			<view class="switchInput">
				<u-button @click="switchInput" :text="text"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			</view>
			<view class="title">网友评价</view>
			<u-divider>大漠孤烟直</u-divider>
			<view class="u-page">
				<view v-if="isEmpty">
					<u-empty mode="comment" icon="http://cdn.uviewui.com/uview/empty/comment.png">
					</u-empty>
				</view>
				<view v-if="isgoto">
					<view style="font-weight: bold; padding-left: 10rpx;">回复你的：</view>
					<view class="u-demo-block" style="background-color: #eeeeee; padding-top: 10rpx;">
						<view class="u-demo-block__content">
							<view class="album">
								<view class="album__avatar" @click="gotoChat(topComment.userId, topComment.nickname)">
									<image :src="topComment.avatar" mode="" style="width: 32px;height: 32px;">
									</image>
								</view>
								<view class="album__content">
									<u--text :text="topComment.nickname" type="primary" bold size="17"></u--text>
									<view class="time">{{topComment.createTime}}</view>
									<u--text class="text" margin="0 0 8px 0"
										:text="topComment.commentContent"></u--text>
									<u-album previewFullImage :urls="topComment.picture" keyName="src2"></u-album>
								</view>
							</view>
						</view>
						<view class="expand" v-if="topComment.rootComment" @click="expand(topComment)">查看更多回复>
						</view>
						<view v-if="userId == topComment.userId" class="delete">
							<u-button plain='true' size="mini" text="删除" type="warning"
								@click="deleted(topComment)"></u-button>
						</view>
						<view>
							<image @click="reply(topComment)" class="huifu" src="../../static/huifu.png">
							</image>
							<view @click="reply(topComment)" class="reply">回复</view>
						</view>

						<u-divider>大漠孤烟直</u-divider>
					</view>
				</view>
				<view class="u-demo-block" v-for="(item, index) in list" :key="index">

					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__avatar" @click="gotoChat(item.userId, item.nickname)">
								<image :src="item.avatar" mode="" style="width: 32px;height: 32px;"></image>
							</view>
							<view class="album__content">
								<u--text :text="item.nickname" type="primary" bold size="17"></u--text>
								<view class="time">{{item.createTime}}</view>
								<u--text class="text" margin="0 0 8px 0" :text="item.commentContent"></u--text>
								<u-album previewFullImage :urls="item.picture" keyName="src2"></u-album>
							</view>
						</view>
					</view>
					<view class="expand" v-if="item.rootComment" @click="expand(item)">查看更多回复></view>
					<view v-if="userId == item.userId" class="delete">
						<u-button plain='true' size="mini" text="删除" type="warning" @click="deleted(item)"></u-button>
					</view>
					<view>
						<image @click="reply(item)" class="huifu" src="../../static/huifu.png"></image>
						<view @click="reply(item)" class="reply">回复</view>
					</view>

					<u-divider>大漠孤烟直</u-divider>
				</view>
			</view>
		</view>
		<!-- 自定义底部Tabbar -->
		<view v-if="!isInputting" class="custom-tabbar">
			<view class="tab-item" @click="addThumb">
				<img v-if="!isThumb" src="../../static/dianzan-before.png" alt="点赞" />
				<img v-if="isThumb" src="../../static/dianzan-after.png" alt="点赞" />
				<view>点赞</view>
			</view>
			<view class="tab-item" @click="addCollect">
				<img v-if="!isCollect" src="../../static/shoucang-before.png" alt="收藏" />
				<img v-if="isCollect" src="../../static/shoucang-after.png" alt="收藏" />
				<view>收藏</view>
			</view>
			<view class="tab-item" @click="addScore">
				<img v-if="!isCollect"
					src="https://img1.baidu.com/it/u=616315056,1271370696&fm=253&fmt=auto?w=800&h=930" alt="评分" />
				<img v-if="isCollect" src="https://img1.baidu.com/it/u=616315056,1271370696&fm=253&fmt=auto?w=800&h=930"
					alt="评分" />
				<view>评分</view>
			</view>
			<!-- 可以根据需求添加更多的Tabbar项 -->
		</view>
		<view v-if="isInputting" class="input" style="background-color: white;">
			<view class="sendComment">
				<u-button @click="sendComment(item)" v-if="inputValue != ''" type="primary" text="发送"></u-button>
				<u-button v-if="inputValue == ''" type="primary" disabled="true" text="发送"></u-button>
			</view>
			<view class="upload" @click="upload">
				<u-icon name="plus-circle" color="#2979ff" size="30"></u-icon>
			</view>
			<view class="input-item">
				<u-textarea showConfirmBar v-model="inputValue" :placeholder="replyName" autoHeight></u-textarea>
			</view>
			<view v-if="isUploading" class="isUploading">
				<view>
					<view class="addbox1_son2">
						<view class="pic-box">
							<view class="pic-box-son" v-for="(picitem,picindex) in picArr" :key="picindex">
								<!-- 删除按钮 -->
								<view class="delbtn" @tap="delpic(picindex)"></view>
								<image :src="picitem"></image>
							</view>
							<view v-show="picArr.length<5" class="pic-box-son" @tap="sendImg">
								<view>点击<br>上传图片</view>
								<view>（最多5张）</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countScore: 5,
				showScore: false,
				text1: '点击菜品图片可查看全部菜品详情',
				userRole: '',
				showOne: true,
				isgoto: false,
				topComment: {},
				locationId: '',
				commentMessage: '',
				show: false,
				replyNickname: '',
				replyUserId: '',
				picture: [],
				imgUrl: '',
				userId: '',
				replyId: '',
				picArr: [],
				isUploading: false,
				replyName: '',
				text: '点击评论',
				isInputting: false,
				inputValue: '',
				isEmpty: true,
				isCollect: false,
				isThumb: false,
				isLastPage: false,
				title: '',
				count: 5,
				value: 0,
				score: '',
				workTime: '',
				address: '',
				description: '',
				dishsArr: [],
				cardList: [],
				shopId: '',
				// shopId: '358070080350851072',
				start: 1,
				length: 10,
				albumWidth: 0,
				urls1: [{
					src2: 'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
				}],
				list: []
			};
		},

		onShow() {
			let that = this;
			that.start = 1;
			that.length = 10;

			// that.loadComment(that.shopId, that);
			// if (that.locationId != '') {
			// 	that.$ajax(that.$url.searchTopCommentById + "?commentId=" + that.locationId, "GET", null, function(resp) {
			// 		that.topComment = resp.data.result;
			// 		that.isgoto = true;
			// 	})
			// }
		},
		onPullDownRefresh() {
			let that = this;
			that.start = 1;
			that.length = 10;
			that.loadComment(that.shopId, that);
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1200)
		},
		onLoad(query) {
			let that = this;
			that.shopId = uni.getStorageSync('shopId');
			that.userId = uni.getStorageSync('userId');
			if (query.locationId) {
				that.locationId = query.locationId;
			}
			if (query.shopId) {
				that.shopId = query.shopId;
			}
			that.$ajax(that.$url.getLoginUser, "GET", null, function(resp) {
				that.userRole = resp.data.result.userRole
			})
			let data = {
				shopId: that.shopId,
				start: 1,
				length: 100
			};
			that.$ajax(that.$url.searchShopById, 'POST', data, function(resp) {
				that.title = resp.data.result.shopName;
				that.score = resp.data.result.shopScore;
				that.workTime = resp.data.result.workTime;
				that.address = resp.data.result.shopAddress;
				that.description = resp.data.result.shopDescription;
			});
			that.$ajax(that.$url.searchDishesByShopId, 'POST', data, function(resp) {
				that.dishsArr = resp.data.result;
			});
			that.loadComment(that.shopId, that);
			if (that.locationId != '') {
				that.$ajax(that.$url.searchTopCommentById + "?commentId=" + that.locationId, "GET", null, function(resp) {
					that.topComment = resp.data.result;
					that.isgoto = true;
				})
			}
			that.isThumbJ();
			that.isCollectJ();
		},
		onReachBottom: function() {
			let that = this;
			if (that.isLastPage) {
				return;
			}
			that.start = that.start + 1;
			that.loadComment(that.shopId, that);
		},
		methods: {
			complaint(){
				uni.navigateTo({
					url:'/pages/add_complaint/add_complaint?shopId=' + this.shopId
				})
			},
			gotoChat(id, nickname){
				uni.navigateTo({
					url:'/pages/private_chat/private_chat?receiverId=' + id + "&nickname=" + nickname
				})
			},
			scoreAdd() {
				let that = this;
				that.showScore = false;
				console.log(that.value)
				let data = {
					shopId: that.shopId,
					value: that.value
				}
				that.$ajax(that.$url.addRate, "POST", data, function(resp) {
					that.score = resp.data.result;
					uni.showToast({
						icon: 'none',
						title: '评分成功！'
					})
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showScore = false
				// console.log('close');
			},
			addScore() {
				let that = this;
				console.log(111)
				that.showScore = true;
			},
			gotoDish(item) {
				let that = this;
				uni.navigateTo({
					url: '/pages/dish/dish?shopId=' + item.shopId
				})
			},
			deleted(item) {
				let that = this;
				let data = {
					commentId: item.id
				}
				uni.showModal({
					title: '提示',
					content: '确认删除该评论？',
					showCancel: true, // 是否显示取消按钮
					confirmText: '确定', // 确定按钮的文本
					success: (res) => {
						if (res.confirm) {
							that.$ajax(that.$url.deleteMyComment, "POST", data, function(resp) {
								uni.showToast({
									icon: 'none',
									title: '删除成功！'
								})
								uni.redirectTo({
									url:'/pages/shop_content/shop_content'
								})
							});
						} else if (res.cancel) {
							console.log('用户点击了取消按钮');
						}
					},
					fail: (error) => {
						console.error('显示弹窗失败', error);
					}
				});
			},
			sendComment(item) {
				let that = this;
				let data = {
					commentContent: that.inputValue,
					shopId: that.shopId,
					picture: that.picture.join(",")
				}
				if (that.replyName != '') {
					data = {
						commentContent: that.inputValue,
						shopId: that.shopId,
						parentId: that.replyId,
						picture: that.picture.join(",")
					}
				}
				that.$ajax(that.$url.addComment, "POST", data, function(resp) {
					uni.showToast({
						icon: 'none',
						title: '评论成功'
					})
					if (that.replyUserId != '') {
						that.sendMessage()
					}
					that.start = 1;
					that.length = 10;
					that.loadComment(that.shopId, that);
					that.inputValue = '';
					uni.redirectTo({
						url: '/pages/shop_content/shop_content'
					})
				})
			},
			sendMessage() {
				let that = this;
				let nickname = uni.getStorageSync("nickname")
				let data = {
					receiverId: that.replyUserId,
					content: that.inputValue,
					sendTime: Date.now(),
					nickname: nickname,
					senderId: that.userId,
					avatar: uni.getStorageSync("avatar"),
					locationId: that.replyId,
					shopId: that.shopId,
					locationName: 'shop',
					className: '评论'
				}
				console.log("messageData", data)
				that.$ajax(that.$url.sendMessage, "POST", data, function(resp) {

				})
			},
			// 上传图片
			sendImg: function() {
				let that = this;
				let num = 5 - this.picArr.length;
				let count = num; // 自定义一次性最多可选几张
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const filePaths = res.tempFilePaths;
						let selected = this.picArr
						for (let i = 0; i < filePaths.length; i++) {
							that.picture[i] = "http://s1qq2mel1.hn-bkt.clouddn.com/images/" + that.userId +
								"/shopComment/" + filePaths[i];
							that.$ajax(that.$url.upLoad, "GET", null, function(resp) {
								let token = resp.data.result;
								let now = new Date();
								that.imgUrl = 'images/' + that.userId + "/shopComment/" +
									filePaths[i]; // 图片链接，其中的 / 会自动生成一个名为images的文件夹， // 则是两个
								let self = this
								wx.uploadFile({
									filePath: filePaths[i], // ctx.takePhoto拍照获取的图片链接
									url: "https://upload-z2.qiniup.com", // 七牛云地址
									name: "file",
									formData: {
										token,
										key: that.imgUrl,
										insertOnly: 0,
									},
									success: (a) => {
										let res = a.data
										res = JSON.parse(res)
										if (res.code == '1') {
											const {
												data
											} = res
											self.avatar = data.url
											self.cdnUrl = getApp().globalData.cdnUrl +
												data.url
										}

										wx.hideLoading()
										wx.showToast({
											title: '上传成功',
											icon: 'success',
											duration: 3000
										})
									},
									fail: (res) => {
										return 0;
									},
								})

							})

							this.picArr.unshift(filePaths[i])
						}
					}
				});

			},
			// 删除当前图片
			delpic: function(index) {
				this.picArr.splice(index, 1)
			},
			upload() {
				let that = this;
				if (that.isUploading == false) {
					that.isUploading = true;
				} else {
					that.isUploading = false;
				}

			},
			switchInput() {
				if (this.isInputting == true) {
					this.isInputting = false
					this.text = '点击评论'
				} else {
					this.isInputting = true
					this.text = '点赞收藏'
				}

			},
			reply(item) {
				this.replyId = item.id;

				this.isInputting = true
				this.text = '点赞收藏'
				if (this.replyName == '') {
					this.replyName = "回复：" + item.nickname;
					this.replyUserId = item.userId;
				} else {
					this.replyName = '';
					this.replyUserId = '';
				}

			},
			isThumbJ() {
				let that = this;
				that.$ajax(that.$url.isThumb + "?shopId=" + that.shopId, "GET", null, function(resp) {
					that.isThumb = resp.data.result;
				})
			},
			isCollectJ() {
				let that = this;
				that.$ajax(that.$url.isCollect + "?shopId=" + that.shopId, "GET", null, function(resp) {
					that.isCollect = resp.data.result;
				})
			},
			expand(item) {
				let data = {
					rootComment: item.rootComment,
					avatar: item.avatar,
					commentContent: item.commentContent,
					createTime: item.createTime,
					nickname: item.nickname,
					shopId: this.shopId,
					id: item.id,
					userId: item.userId,
					picture: item.picture,
				}
				uni.navigateTo({
					url: '/pages/reply_comment/reply_comment?item=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			loadComment(id, ref) {
				let that = this;
				let data = {
					start: ref.start,
					length: ref.length,
					shopId: id
				};
				that.$ajax(that.$url.searchAllComments, 'POST', data, function(resp) {
					if (resp.data.result.length == 0 && ref.start == 1) {
						ref.list = [];
					}
					if (resp.data.result == null || resp.data.result.length == 0) {
						ref.isLastPage = true;
						ref.start = ref.start - 1;
						uni.showToast({
							icon: 'none',
							title: '已经到底了'
						});
					} else {
						ref.isEmpty = false;
						if (ref.start == 1) {
							ref.list = [];
						}
						ref.list = ref.list.concat(resp.data.result);
					}
				});
			},
			addThumb() {
				let that = this;
				let data = {
					shopId: that.shopId
				}
				if (that.isThumb == false) {
					that.$ajax(that.$url.addThumb, "POST", data, function(resp) {
						that.isThumb = true;
						uni.showToast({
							icon: 'none',
							title: '点赞成功'
						})
					})
				}
				if (that.isThumb == true) {
					that.$ajax(that.$url.removeThumb, "POST", data, function(resp) {
						that.isThumb = false;
						uni.showToast({
							icon: 'none',
							title: '取消点赞'
						})
					})
				}

			},
			addCollect() {
				let that = this;
				let data = {
					shopId: that.shopId
				}
				if (that.isCollect == false) {
					that.$ajax(that.$url.addCollect, "POST", data, function(resp) {
						that.isCollect = true;
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
					})
				}
				if (that.isCollect == true) {
					that.$ajax(that.$url.removeCollect, "POST", data, function(resp) {
						that.isCollect = false;
						uni.showToast({
							icon: 'none',
							title: '取消收藏'
						})
					})
				}
			}
			// 您可以为每个Tabbar项添加类似的方法
		}
	};
</script>

<style lang="scss">
	.delete {
		position: absolute;
		padding-top: 45rpx;
		padding-left: 420rpx;
	}

	.addbox1_son2 {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: row; */
		/* align-items: center; */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, .1);
	}

	.pic-box {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* justify-content: center; */
	}

	.pic-box-son {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		width: 152rpx;
		height: 152rpx;
		padding: 4rpx;
		border-radius: 6rpx;
		border: 2rpx dashed rgba(0, 0, 0, .2);
	}

	.pic-box-son image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.pic-box-son>view:first-child {
		font-size: 28rpx;
		color: #565656;
		text-align: center;
	}

	.pic-box-son>view:last-child {
		font-size: 24rpx;
		color: #a7a7a7;
		text-align: center;
	}

	.delbtn {
		width: 100%;
		position: relative;
		text-align: center;
		line-height: 32rpx;
		font-size: 46rpx;
	}

	.delbtn::before {
		position: absolute;
		content: '-';
		background-color: #ff9000;
		color: #fff;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50rpx;
		top: 6rpx;
		right: 6rpx;
		z-index: 99;
	}

	.isUploading {
		padding-left: 40rpx;
	}

	.sendComment {
		position: absolute;
		padding-left: 640rpx;
		padding-top: 20rpx;
	}

	.switchInput {
		position: absolute;
		padding-left: 560rpx;
		padding-bottom: 10rpx;
	}

	.upload {
		position: absolute;
		margin-left: 560rpx;
		margin-top: 30rpx;
	}

	.input-item {
		width: 70%;
		margin-left: 10rpx;
		margin-bottom: 70rpx;
		margin-top: 20rpx;
	}

	.input {
		box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.reply {
		margin-left: 628rpx;
		margin-top: 45rpx;
		color: #AAAAAA;
		font-size: 28rpx;
	}

	.huifu {
		width: 70rpx;
		height: 43rpx;
		position: absolute;
		margin-left: 550rpx;
	}

	.time {
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		color: #AAABBB;
	}

	.u-page {
		padding-bottom: 110rpx;
	}

	.expand {
		font-size: 24rpx;
		color: green;
		margin-left: 120rpx;
		margin-top: 20rpx;
	}

	.u-demo-block__content {
		margin-top: 48rpx;
		margin-left: 20rpx;

	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.description {
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	// 容器
	.scrollContainer {
		margin-left: 30rpx;
		width: 666rpx;
		height: 200rpx;
		white-space: nowrap;
		margin-top: 20rpx;
	}

	// 容器项
	.scrollitem {
		margin-top: 40rpx;
		width: 30%;
		height: 30%;
		display: inline-block;
		/* margin-left: 30rpx; */
		height: 234rpx;
	}

	.scrollimage {
		margin-left: 10rpx;
		width: 98%;
		height: 90%;
	}

	/* 分割线样式 */
	.divider {
		margin-top: 50rpx;
		height: 10px;
		/* 设置分割线高度 */
		background-color: #eeeeee;
		/* 设置分割线颜色为灰色 */
	}

	.address {
		margin-left: 120rpx;
		margin-top: 40rpx;
	}

	.dizhi {
		position: absolute;
		width: 80rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.workTime {
		margin-left: 120rpx;
		margin-top: 40rpx;
	}

	.shijian {
		position: absolute;
		width: 100rpx;
		height: 60rpx;
		margin-top: 30rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 25rpx;
		margin-left: 10rpx;
	}

	.score {
		font-size: 28rpx;
		margin-left: 250rpx;
		color: red;
		margin-top: 30rpx;
	}

	/* 自定义底部Tabbar的样式 */
	.custom-tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
		box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
		height: 60px;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		/* 确保Tabbar在页面上方 */
	}


	.tab-item {
		text-align: center;
		padding: 10px;
		font-size: 14px;
		color: #333;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-item img {
		width: 30px;
		height: 24px;
		margin-bottom: 4px;
	}

	/* 页面内容样式 */
	.content {
		padding-bottom: 60px;
		/* 留出Tabbar高度 */
	}
</style>